<template>
  <div id="app">
    <router-view></router-view>
    <!-- <Menu class="appmenu" />
    <div class="appright">
      <Top />
      <router-view></router-view>
    </div> -->

  </div>
</template>

<script>
import Menu from "./components/Menu.vue";
import Top from "./components/Top.vue";
export default {
  name: "Main",
  components: {
    Menu,
    Top
  }
};
</script>
 

<style  lang="scss" >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 12px;
  background: #f6f6f6;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.clear {
  clear: both;
  &:after {
    content: "";
    clear: both;
  }
}
#app {
  font-family: "PingFangSC", "Microsoft YaHei";
}
.appmenu {
  position: fixed;
  height: 100%;
  top: 0px;
  width: 171px;
  background:linear-gradient(360deg,rgba(12,61,56,1) 0%,rgba(12,113,100,1) 100%)
}
.appright {
  margin-left: 171px;
}
@each $i in treedisplay, treedisplay, ringdisplay, griddisplay, Automaticdisplay,
  new, editor, delete, save, export
{
  .el-icon-#{$i} {
    &:before {
      content: "";
      width: 20px;
      height: 28px;
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
      margin-top: -3px;
      background: url("assets/#{$i}.png") no-repeat center center;
    }
  }
}

@each $i in KPIindexname, Noteinformation, Runtheinformation,
  basicinformationattribute
{
  .icon-#{$i} {
    background-image: url("assets/#{$i}.png") !important;
  }
}
</style>
